﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子对镶嵌布局</title>
   <style type="text/css">
*{margin:0;padding:0;}
     .layer1{width:100%;height:100px;background:#39F;float:left;}
	     .layer1-1{width:40%;height:100px;background:#39F;float:left;}
		 .layer1-2{width:60%;height:100px;background:#6C0;float:left;}
		 .layer1-3{clear:both;}
	 .layer2{width:100%;height:100px;background:#CC3;float:left;}
	      .layer2-1{width:30%;height:100px;background:#CC3;float:left;} 
		  .layer2-2{width:40%;height:100px;background:#FCC;float:left;}
		  .layer2-3{width:30%;height:100px;background:#3CC;float:left;}
		  .layer2-4{clear:both;}
	 .layer3{width:100%;height:100px;background:#F60;float:left;}
	 .layer4{width:100%;height:100px;background:#F69;float:left;}
	 .layer5{width:100%;height:100px;background:#6C0;float:left;}
	 .layer6{clear:both;}
    </style>
      
</head>
  <body>
     <div class="layer1">
         <div class="layer1-1"></div>
         <div class="layer1-2"></div>
         <div class="layer1-3"></div>
        </div>
     <div class="layer2">
            <div class="layer2-1"></div>
            <div class="layer2-2"></div>
            <div class="layer2-3"></div>
            <div class="layer2-4"></div>
        </div>
     <div class="layer3"></div>
     <div class="layer4"></div>
     <div class="layer5"></div>
     <div class="layer6"></div>
</body>
</html>
